quickSettings: Color header icon if checked

... as requested by the design team.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2393>

diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index eeb7420e0cc5ffbc0f2cdd50baa9081e2bdd1f5c..4f8a62f2756a88c365cdeee67209d1e066a52024 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -35,6 +35,8 @@
       border-radius: 999px;
       padding: 1.5 * $base_padding;
       background-color: lighten($bg_color, 10%);
+
+      &.active { background-color: $selected_bg_color; }
     }
 
     & .title {

diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index a7ae84088ccbe9bd53a8ef87609a55741df57c96..634a0703f9b0895a97da5779ed89f633c4b5b718 100644 (file)
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -154,6 +154,10 @@ class QuickToggleMenu extends PopupMenu.PopupMenuBase {
             this._headerTitle, side, 1, 1);
         headerLayout.attach_next_to(this._headerSubtitle,
             this._headerTitle, Clutter.GridPosition.BOTTOM, 1, 1);
+
+        sourceActor.connect('notify::checked',
+            () => this._syncChecked());
+        this._syncChecked();
     }
 
     setHeader(icon, title, subtitle = '') {
@@ -238,6 +242,13 @@ class QuickToggleMenu extends PopupMenu.PopupMenuBase {
         this.emit('open-state-changed', false);
     }
 
+    _syncChecked() {
+        if (this.sourceActor.checked)
+            this._headerIcon.add_style_class_name('active');
+        else
+            this._headerIcon.remove_style_class_name('active');
+    }
+
     // expected on toplevel menus
     _setOpenedSubMenu(submenu) {
         this._openedSubMenu?.close(true);